/* 《快跑有色狼》样式表 */
:root{
  --bg:#1a0a14;
  --bg2:#2d1024;
  --pink:#ff5a8c;
  --pink-d:#d13b6b;
  --gold:#ffd15c;
  --brown:#8a5a2b;
  --txt:#fff2f6;
  --txt-dim:#c9a8b6;
  --hp:#ff4d6d;
  --hp2:#ff9db0;
  --xp:#7ce0ff;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* 微信 X5 内核不支持 backdrop-filter / inset，降级为不透明+常规 top/left */
@supports not (backdrop-filter: blur(1px)){
  .mask{background:rgba(10,3,8,.94) !important;}
  .hud-pause{background:rgba(40,15,30,.92) !important;}
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--txt);user-select:none;-webkit-user-select:none;touch-action:none;
}
#app{position:fixed;top:0;right:0;bottom:0;left:0;}
/* ★ 锁竖屏：由 JS 在「真的横屏」时给 #app 加 .lock-portrait。
   不用 CSS 媒体查询 (orientation:landscape) —— 某些手机浏览器/微信内核会把竖屏误判成横屏，
   那样游戏区会被压成一条窄条、两侧全黑，看着就像打不开 */
#app.lock-portrait{
  left:50%; right:auto; top:50%; bottom:auto;
  transform:translate(-50%,-50%);
  width:calc(100vh * 9 / 16); height:100vh;
  max-width:100vw;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 60px rgba(0,0,0,.8);
}
#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;}

/* ---------- HUD ---------- */
.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .25s;}
.hud.on{opacity:1;}
.xp-track{position:absolute;top:0;left:0;right:0;height:6px;background:rgba(0,0,0,.45);}
.xp-fill{height:100%;width:0;background:linear-gradient(90deg,#7ce0ff,#b58cff);transition:width .15s;box-shadow:0 0 10px #7ce0ff;}
.hud-top{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:0;right:0;display:flex;align-items:center;padding:0 12px;gap:10px;}
.hud-left{display:flex;gap:6px;align-items:center;}
.hud-pause{pointer-events:auto;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(40,15,30,.55);color:var(--txt);font-size:13px;backdrop-filter:blur(6px);}
.hud-pause:active{transform:scale(.92);}
.hud-shop{font-size:17px;border-color:rgba(255,209,92,.5);background:rgba(70,45,10,.6);}
.hud-center{flex:1;text-align:center;}
.hud-wave{font-size:15px;font-weight:700;letter-spacing:1px;text-shadow:0 2px 6px #000;}
.hud-time{font-size:11px;color:var(--txt-dim);font-variant-numeric:tabular-nums;margin-top:1px;}
.hud-right{display:flex;flex-direction:column;gap:3px;align-items:flex-end;min-width:62px;}
.hud-stat{font-size:12px;font-weight:700;display:flex;align-items:center;gap:3px;text-shadow:0 1px 3px #000;}
.hud-stat.coin{color:var(--gold);}
.hud-stat .ico{font-size:12px;}

.hud-chip-row{position:absolute;top:calc(56px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;align-items:flex-start;gap:8px;}
.hud-avatar{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;border:2px solid var(--pink);box-shadow:0 2px 8px rgba(0,0,0,.5);flex-shrink:0;}
.lv-chip{background:rgba(255,209,92,.16);border:1px solid rgba(255,209,92,.45);color:var(--gold);font-size:11px;font-weight:800;padding:3px 8px;border-radius:9px;flex-shrink:0;margin-top:3px;}
.skill-tray{display:flex;flex-wrap:wrap;gap:4px;flex:1;max-width:calc(100% - 108px);}
.skill-tray .sk{width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:13px;position:relative;flex-shrink:0;}
.skill-tray .sk b{position:absolute;right:-2px;bottom:-3px;font-size:8px;background:var(--pink);color:#fff;border-radius:6px;padding:0 3px;border:1px solid #000;line-height:1.4;}

.hud-bottom{position:absolute;left:12px;right:12px;bottom:calc(14px + var(--safe-b));}
.hp-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;color:var(--txt-dim);}
.hp-track{height:9px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.12);}
.hp-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--hp),var(--hp2));transition:width .2s;}

.wave-banner{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:27px;font-weight:900;letter-spacing:3px;color:var(--gold);text-shadow:0 0 18px rgba(255,209,92,.7),0 3px 6px #000;opacity:0;transition:opacity .3s;}
.wave-banner.on{opacity:1;}
.hint-tip{position:absolute;bottom:calc(56px + var(--safe-b));left:0;right:0;text-align:center;font-size:11px;color:rgba(255,255,255,.42);transition:opacity .5s;}

/* ---------- 屏幕页面 ---------- */
.screen-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;}
.screen{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 0%,#3a1230,#1a0a14 70%);padding:calc(24px + env(safe-area-inset-top,0px)) 22px calc(22px + var(--safe-b));}
.screen.fade-in{animation:fadeIn .22s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.sc-title{font-size:33px;font-weight:900;text-align:center;letter-spacing:5px;
  background:linear-gradient(180deg,#fff,#ff9ec0);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(255,90,140,.4);margin:12px 0 2px;}
.sc-sub{text-align:center;font-size:12px;color:var(--txt-dim);margin-bottom:22px;}
.sc-grow{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;}

.hero-card{display:flex;flex-direction:column;align-items:center;margin:6px 0 20px;}
.hero-card img{width:118px;height:118px;border-radius:50%;border:3px solid var(--pink);box-shadow:0 0 26px rgba(255,90,140,.45);}
.hero-card p{margin-top:9px;font-size:13px;color:var(--txt-dim);}

.btn{display:block;width:100%;border:none;border-radius:15px;padding:15px;font-size:16px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-d));margin-bottom:11px;box-shadow:0 5px 16px rgba(209,59,107,.35);}
.btn:active{transform:scale(.97);}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:none;color:var(--txt);}
.btn.gold{background:linear-gradient(135deg,#ffcf5c,#e09a1f);color:#3a2400;box-shadow:0 5px 16px rgba(224,154,31,.3);}
.btn.sm{padding:11px;font-size:14px;}
.btn[disabled]{opacity:.4;pointer-events:none;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.stat-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px;}
.stat-card .k{font-size:11px;color:var(--txt-dim);margin-bottom:5px;}
.stat-card .v{font-size:20px;font-weight:900;color:var(--gold);}
.stat-card .v.pink{color:var(--pink);}

.item-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:12px;margin-bottom:10px;}
.item-row .ic{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.item-row .info{flex:1;min-width:0;}
.item-row .nm{font-size:14px;font-weight:700;margin-bottom:3px;}
.item-row .ds{font-size:11px;color:var(--txt-dim);line-height:1.5;}
.item-row .lv{font-size:10px;color:var(--gold);margin-top:3px;}
.btn.up{width:auto;padding:9px 14px;font-size:12px;margin:0;border-radius:11px;flex-shrink:0;}
.btn.up.max{background:rgba(255,255,255,.07);color:var(--txt-dim);box-shadow:none;}

.empty{text-align:center;color:var(--txt-dim);font-size:12px;padding:40px 0;}

/* ---------- 弹层 ---------- */
.modal-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:60;}
.mask{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(10,3,8,.94);backdrop-filter:blur(4px);pointer-events:auto;
  display:flex;align-items:center;justify-content:center;padding:22px;animation:fadeIn .18s;}
.dialog{width:100%;max-width:360px;max-height:86vh;overflow-y:auto;background:linear-gradient(160deg,#3d1433,#241026);
  border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px;box-shadow:0 14px 44px rgba(0,0,0,.6);}
.dialog h3{font-size:20px;font-weight:900;text-align:center;margin-bottom:6px;}
.dialog .dsc{font-size:12px;color:var(--txt-dim);text-align:center;margin-bottom:16px;}

/* 15 秒自动选倒计时 */
.auto-tips{font-size:11.5px;color:#ffd15c;text-align:center;margin:-8px 0 8px;opacity:.9;}
.auto-bar{height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:0 0 15px;}
.auto-bar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd15c,#ff9ec0);
  border-radius:3px;transition:width .1s linear;}

.up-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:17px;
  padding:15px;margin-bottom:11px;cursor:pointer;transition:.15s;}
.up-card:active{transform:scale(.97);border-color:var(--pink);}
.up-card.rare{border-color:rgba(255,209,92,.55);background:rgba(255,209,92,.09);}

/* 商城 */
.btn.gold{background:linear-gradient(135deg,#ffd15c,#e0a020);color:#3a2400;box-shadow:0 6px 20px rgba(224,160,32,.35);}
.sc-title.sm{font-size:15px;letter-spacing:2px;margin:18px 0 10px;color:#ffd15c;text-align:left;opacity:.95;}
.sc-sub .gold{color:#ffd15c;font-weight:800;}
.item-row.shop-row{align-items:flex-start;}
.shop-row .ds.dim{opacity:.62;font-size:11.5px;margin-top:2px;}
.shop-row .ds.eff{color:#7dffb0;font-size:11.5px;margin-top:3px;}
.shop-row.equipped{background:rgba(255,209,92,.08);border-color:rgba(255,209,92,.45);}
.lv-badge{display:inline-block;font-size:10px;font-weight:700;color:#c9a8b6;background:rgba(255,255,255,.1);
  border-radius:6px;padding:1px 6px;margin-left:5px;vertical-align:middle;}
.lv-badge.on{background:rgba(255,209,92,.25);color:#ffd15c;}
.item-row .ic.armed{border-color:#ffd15c;}
.up-card.epic{border-color:rgba(181,140,255,.6);background:rgba(181,140,255,.11);}
.up-card .t{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;margin-bottom:5px;}
.up-card .t .ic{font-size:19px;}
.up-card .t .tag{margin-left:auto;font-size:9px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.14);color:var(--txt-dim);}
.up-card .d{font-size:11.5px;color:var(--txt-dim);line-height:1.55;}
.up-card .lvnow{font-size:10px;color:var(--gold);margin-top:5px;}

/* ---------- Toast ---------- */
.toast-root{position:absolute;top:calc(84px + env(safe-area-inset-top,0px));left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:80;}
.toast{background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.15);color:var(--txt);
  font-size:13px;padding:9px 17px;border-radius:22px;animation:toastIn .2s;font-weight:700;}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}

/* ---------- 启动遮罩 ---------- */
.boot{position:absolute;top:0;right:0;bottom:0;left:0;z-index:99;background:radial-gradient(ellipse at 50% 40%,#3d1433,#12060d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;transition:opacity .45s;}
.boot.off{opacity:0;pointer-events:none;}
.boot-logo{font-size:37px;font-weight:900;letter-spacing:7px;
  background:linear-gradient(180deg,#fff,#ff8ab0);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 32px rgba(255,90,140,.5);}
.boot-bar{width:172px;height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;}
.boot-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--pink),var(--gold));animation:bootLoad 1.5s ease forwards;}
@keyframes bootLoad{to{width:100%;}}
.boot-tip{font-size:12px;color:var(--txt-dim);}

/* 滚动条 */
.sc-grow::-webkit-scrollbar,.dialog::-webkit-scrollbar{width:3px;}
.sc-grow::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}

/* 微信/手机横屏提示 */
.rotate-tip{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;display:none;
  background:radial-gradient(ellipse at 50% 40%,#3d1433,#12060d);
  flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;text-align:center;}
.rotate-tip .ph{font-size:52px;animation:rot 1.8s ease-in-out infinite;}
@keyframes rot{0%,100%{transform:rotate(0)}50%{transform:rotate(-90deg)}}
.rotate-tip p{font-size:15px;color:#ff9ec0;font-weight:700;}
/* ★ 改为「游戏画面锁竖屏」：横屏时不再弹这个提示挡着，而是让 #app 保持竖屏比例居中（见文件顶部 #app 规则） */
.rotate-tip{display:none !important;}
/* ==================================================================
   UI 视觉优化（2026-10-16 21:40）—— 只动样式：布局/对齐/字号/间距/配色/层级/按钮状态/HUD位置
   不涉及任何玩法、数值、速度、碰撞
   ================================================================== */

/* ---- 1) HUD 顶栏：按钮统一 + 统计改胶囊（原来数字压在亮背景上看不清）---- */
.hud-top{top:calc(12px + env(safe-area-inset-top,0px));padding:0 14px;gap:12px;}
.hud-left{gap:8px;}
.hud-pause{width:40px;height:40px;border-radius:12px;font-size:14px;
  border:1px solid rgba(255,255,255,.26);box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);}
.hud-shop{font-size:18px;border-color:rgba(255,209,92,.62);background:rgba(74,48,10,.72);}
.hud-right{gap:6px;min-width:0;align-items:flex-end;}
.hud-stat{font-size:12.5px;gap:4px;padding:4px 10px;border-radius:20px;
  background:rgba(12,4,10,.62);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 8px rgba(0,0,0,.4);letter-spacing:.3px;}
.hud-stat .ico{font-size:13px;}
.hud-stat.coin{border-color:rgba(255,209,92,.42);background:rgba(46,32,6,.72);}
.hud-wave{font-size:16px;letter-spacing:1.5px;color:#fff;}
.hud-time{font-size:11.5px;letter-spacing:.5px;}

/* ---- 2) 血条：加高、加高光、数值更清楚 ---- */
.hud-bottom{bottom:calc(16px + var(--safe-b));}
.hp-row{font-size:12px;margin-bottom:5px;}
.hp-row span:first-child{color:#fff;font-weight:800;letter-spacing:1px;}
.hp-row span:last-child{font-variant-numeric:tabular-nums;color:#fff;font-weight:700;}
.hp-track{height:11px;border-radius:7px;border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);}
.hp-fill{background:linear-gradient(180deg,#ff8aa3,var(--hp) 45%,#c81f42);box-shadow:0 0 10px rgba(255,77,109,.55);}

/* ---- 3) 按钮：统一高度/圆角/字距，状态更明确（按下、禁用）---- */
.btn{min-height:52px;border-radius:16px;letter-spacing:2px;font-size:16.5px;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;}
.btn:active{transform:scale(.97);filter:brightness(1.12);}
.btn.ghost{background:rgba(255,255,255,.075);border:1.5px solid rgba(255,255,255,.18);}
.btn.ghost:active{border-color:rgba(255,255,255,.42);}
.btn[disabled]{opacity:.35;filter:grayscale(.55);box-shadow:none;pointer-events:none;}
.btn.up{min-width:82px;min-height:0;padding:10px 14px;letter-spacing:.5px;font-size:12.5px;border-radius:12px;}
.btn.up.max{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}

/* ---- 4) 主菜单：统计卡片对齐、数字等宽，头像圈更精细 ---- */
.stat-grid{gap:11px;margin-bottom:16px;}
.stat-card{padding:14px 13px;border-radius:15px;background:rgba(255,255,255,.06);}
.stat-card .k{font-size:11.5px;letter-spacing:.5px;margin-bottom:6px;}
.stat-card .v{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.1;}
.hero-card{margin:8px 0 22px;}
.hero-card img{width:120px;height:120px;border-width:3px;
  box-shadow:0 0 28px rgba(255,90,140,.42),0 6px 18px rgba(0,0,0,.5),inset 0 0 0 3px rgba(0,0,0,.35);}
.hero-card p{margin-top:11px;font-size:13.5px;line-height:1.5;}

/* ---- 5) 商城 / 列表：图标块统一、行距一致、已穿戴加金色竖条 ---- */
.item-row{gap:12px;padding:13px 12px;border-radius:15px;margin-bottom:11px;}
.item-row .ic{width:46px;height:46px;border-radius:13px;border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.item-row .nm{font-size:14.5px;letter-spacing:.3px;}
.item-row .ds{font-size:11.5px;line-height:1.55;}
.shop-row.equipped{position:relative;background:rgba(255,209,92,.1);
  border-color:rgba(255,209,92,.5);box-shadow:0 0 0 1px rgba(255,209,92,.12),0 4px 14px rgba(0,0,0,.3);}
.shop-row.equipped::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:3px;background:linear-gradient(180deg,#ffd15c,#e0a020);}
.sc-title.sm{margin:20px 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(255,209,92,.22);}
.lv-badge{padding:2px 7px;border-radius:7px;font-size:10px;}

/* ---- 6) 页面层级：顶部加重阴影，标题与内容分层 ---- */
.screen{background:radial-gradient(ellipse at 50% 0%,#3a1230 0%,#25102a 45%,#150709 100%);}
.sc-title{margin:14px 0 3px;letter-spacing:6px;}
.sc-sub{margin-bottom:20px;letter-spacing:.4px;}

/* 尊重系统「减少动效」偏好：关掉入场动画（也让截图/录屏更干净） */
@media (prefers-reduced-motion: reduce){
  .screen.fade-in,.mask,.toast{animation:none !important;}
  .boot{transition:none !important;}
}

/* 统计卡片：数字别贴着下边框（2026-10-16 22:30） */
.stat-card{padding:14px 14px 17px;}
.stat-card .v{line-height:1.18;display:block;}

/* ==================================================================
   开场动画（2026-10-16 22:40）
   ================================================================== */
.boot{background:radial-gradient(ellipse at 50% 42%,#3d1433,#12060d 75%);gap:0;}
.boot.off{opacity:0;pointer-events:none;display:none;}

.intro-stage{position:relative;width:100%;height:40vh;max-height:330px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.intro-hero{position:relative;z-index:5;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,90,140,.34),rgba(255,90,140,0) 68%);
  display:flex;align-items:center;justify-content:center;animation:introFloat 2.6s ease-in-out .95s infinite;}
.intro-hero img{width:150px;height:150px;object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,90,140,.45));
  animation:introPop .95s cubic-bezier(.18,1.5,.42,1) both;}
@keyframes introPop{0%{transform:scale(2.5) rotate(-12deg);opacity:0;}
  55%{transform:scale(.92) rotate(3deg);opacity:1;}
  78%{transform:scale(1.05) rotate(-1deg);}
  100%{transform:scale(1) rotate(0);}}
@keyframes introFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

.intro-bug{position:absolute;width:96px;height:96px;object-fit:contain;opacity:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.65));}
.ib1{left:6%;bottom:6%;animation:introBugL .75s cubic-bezier(.2,1.25,.4,1) .28s both, introWiggle 1.5s ease-in-out 1.05s infinite;}
.ib2{right:5%;bottom:14%;width:84px;animation:introBugR .75s cubic-bezier(.2,1.25,.4,1) .42s both, introWiggle 1.7s ease-in-out 1.2s infinite;}
.ib3{right:12%;bottom:2%;width:120px;animation:introBugB .8s cubic-bezier(.2,1.25,.4,1) .56s both, introWiggle 1.9s ease-in-out 1.35s infinite;}
@keyframes introBugL{0%{transform:translate(-80vw,30vh) rotate(-28deg);opacity:0;}100%{transform:translate(0,0) rotate(0);opacity:1;}}
@keyframes introBugR{0%{transform:translate(80vw,26vh) rotate(28deg);opacity:0;}100%{transform:translate(0,0) rotate(0);opacity:1;}}
@keyframes introBugB{0%{transform:translate(0,50vh) scale(.6);opacity:0;}100%{transform:translate(0,0) scale(1);opacity:1;}}
@keyframes introWiggle{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7px) rotate(-4deg);}}

.intro-plunger{position:absolute;width:130px;left:16%;top:14%;transform-origin:70% 60%;opacity:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation:introSpin .85s cubic-bezier(.2,1.4,.4,1) .78s both, introBreathe 2.4s ease-in-out 1.6s infinite;}
@keyframes introSpin{0%{transform:rotate(-420deg) scale(.3);opacity:0;}100%{transform:rotate(-24deg) scale(1);opacity:1;}}
@keyframes introBreathe{0%,100%{transform:rotate(-24deg) scale(1);}50%{transform:rotate(-18deg) scale(1.05);}}

/* 注意：标题要逐字拆 span，不能用 background-clip:text（子元素里文字会变全透明） */
.intro-title{margin-top:10px;font-size:42px;font-weight:900;text-align:center;
  color:#ffd15c;letter-spacing:3px;
  text-shadow:0 0 18px rgba(255,209,92,.85),0 0 38px rgba(255,90,140,.55),0 4px 2px rgba(0,0,0,.6);}
.intro-title span{display:inline-block;animation:introChar .5s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes introChar{0%{transform:translateY(28px) scale(.35);opacity:0;filter:blur(7px);}
  70%{transform:translateY(-5px) scale(1.14);opacity:1;filter:blur(0);}
  100%{transform:translateY(0) scale(1);}}

.intro-sub{margin-top:9px;font-size:13px;color:#ffc9dd;letter-spacing:1.4px;text-align:center;
  animation:introFadeUp .6s ease 6.45s both;}
@keyframes introFadeUp{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:none;}}

.boot-bar{margin-top:20px;width:180px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;
  animation:introFadeUp .5s ease 6.55s both;}
.boot-tip{margin-top:11px;font-size:12px;color:var(--txt-dim);animation:introFadeUp .5s ease 6.65s both;}

.intro-skip{position:absolute;right:18px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  font-size:12px;color:rgba(255,255,255,.55);padding:8px 14px;border-radius:20px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);
  animation:introFadeUp .5s ease 1.2s both;}

/* ==================================================================
   开场动画 2.0：敌人朝主角追来 → 主角三连扔大便把它们打飞
   ================================================================== */
/* 敌人：从画面外冲向主角身边（用 margin 居中，keyframes 里的 transform 只负责位移） */
.intro-bug{position:absolute;left:50%;top:50%;width:84px;height:84px;object-fit:contain;
  margin-left:-42px;margin-top:-42px;opacity:0;z-index:4;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));}
.ib1{animation:introChase1 1.15s cubic-bezier(.2,1.05,.4,1) 1.15s both,
                 introHover1 1.15s ease-in-out 2.35s infinite,
                 introBugHit .5s ease-in 4.98s forwards;}
.ib2{width:76px;height:76px;margin-left:-38px;margin-top:-38px;
  animation:introChase2 1.15s cubic-bezier(.2,1.05,.4,1) 1.30s both,
            introHover2 1.3s ease-in-out 2.50s infinite,
            introBugHit .5s ease-in 5.13s forwards;}
.ib3{width:118px;height:118px;margin-left:-59px;margin-top:-59px;
  animation:introChase3 1.2s cubic-bezier(.2,1.05,.4,1) 1.45s both,
            introHover3 1.45s ease-in-out 2.65s infinite,
            introBugHit .5s ease-in 5.28s forwards;}

@keyframes introChase1{0%{transform:translate(-300px,-250px) scale(.45) rotate(-28deg);opacity:0;}
  12%{opacity:1;}100%{transform:translate(-126px,66px) scale(1) rotate(0);opacity:1;}}
@keyframes introHover1{0%,100%{transform:translate(-126px,66px) scale(1) rotate(0);}
  50%{transform:translate(-118px,56px) scale(1.07) rotate(-6deg);}}
@keyframes introChase2{0%{transform:translate(300px,-235px) scale(.45) rotate(28deg);opacity:0;}
  12%{opacity:1;}100%{transform:translate(126px,66px) scale(1) rotate(0);opacity:1;}}
@keyframes introHover2{0%,100%{transform:translate(126px,66px) scale(1) rotate(0);}
  50%{transform:translate(118px,56px) scale(1.07) rotate(6deg);}}
@keyframes introChase3{0%{transform:translate(0,330px) scale(.6) rotate(0);opacity:0;}
  12%{opacity:1;}100%{transform:translate(6px,138px) scale(1.02) rotate(0);opacity:1;}}
@keyframes introHover3{0%,100%{transform:translate(6px,138px) scale(1.02) rotate(0);}
  50%{transform:translate(10px,130px) scale(1.09) rotate(-3deg);}}
/* 被大便砸中：闪白 → 消失 */
@keyframes introBugHit{0%{opacity:1;filter:none;}
  16%{opacity:1;filter:brightness(3.6) drop-shadow(0 0 14px #fff);}
  100%{opacity:0;filter:brightness(3.6) drop-shadow(0 0 14px #fff);}}

/* 便便：从主角身上朝三只敌人飞出去 */
.intro-poop{position:absolute;left:50%;top:50%;width:46px;height:46px;object-fit:contain;
  margin-left:-23px;margin-top:-23px;opacity:0;z-index:7;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));}
.ip1{animation:introPoop1 .45s linear 4.62s both;}
.ip2{animation:introPoop2 .45s linear 4.77s both;}
.ip3{animation:introPoop3 .45s linear 4.92s both;}
@keyframes introPoop1{0%{transform:translate(-10px,14px) scale(.4) rotate(-40deg);opacity:0;}
  18%{opacity:1;}86%{opacity:1;}
  100%{transform:translate(-112px,58px) scale(1.05) rotate(330deg);opacity:0;}}
@keyframes introPoop2{0%{transform:translate(10px,14px) scale(.4) rotate(40deg);opacity:0;}
  18%{opacity:1;}86%{opacity:1;}
  100%{transform:translate(112px,58px) scale(1.05) rotate(-330deg);opacity:0;}}
@keyframes introPoop3{0%{transform:translate(0,22px) scale(.45) rotate(0);opacity:0;}
  18%{opacity:1;}86%{opacity:1;}
  100%{transform:translate(0,140px) scale(1.15) rotate(300deg);opacity:0;}}

/* 主角手里的马桶搋子：改成站在主角右下、轻轻晃（不再飞出去当武器） */
.intro-plunger{position:absolute;left:50%;top:50%;width:112px;margin-left:24px;margin-top:26px;
  transform-origin:20% 70%;opacity:0;z-index:6;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation:introHoldIn .6s ease-out .9s both, introHoldSway 2.4s ease-in-out 1.5s infinite;}
@keyframes introHoldIn{0%{opacity:0;transform:rotate(-30deg) scale(.6);}100%{opacity:1;transform:rotate(8deg) scale(1);}}
@keyframes introHoldSway{0%,100%{transform:rotate(8deg) scale(1);}50%{transform:rotate(14deg) scale(1.03);}}


/* ---------- 背景层（GPU 合成）：改 transform 即可移动，不重绘 canvas ---------- */
.bg-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;background:#150709;}
.bg-layer img{position:absolute;left:0;top:0;transform:translate3d(0,0,0);transform-origin:0 0;
  will-change:transform;backface-visibility:hidden;pointer-events:none;user-select:none;}
#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;z-index:1;background:transparent;}


/* 开场台词字幕 */
.intro-line{position:absolute;left:0;right:0;bottom:calc(26% + env(safe-area-inset-bottom,0px));
  text-align:center;padding:0 26px;font-size:16px;font-weight:700;line-height:1.6;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 22px rgba(255,90,140,.5);
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;z-index:20;}
.intro-line.on{opacity:1;transform:none;}

/* ★ 重要：canvas 不能有 z-index（会盖住菜单/HUD，导致点不进去）；改成给界面层加层级 */
#game-canvas{z-index:auto;}
.hud{z-index:2;}
.screen-root{z-index:3;}

/* ==================================================================
   开场动画 3.0 —— 按老板拍板的 4 格分镜（story.png）
   格1 色狼爱心眼尾随 / 格2 主角害怕发抖 / 格3 主角生气扔大便 / 格4 砸中·色狼晕倒
   总时长 9 秒
   ================================================================== */
/* ---- 格1：色狼冲进来 + 头顶冒爱心 ---- */
.ib1{animation:introChase1 1.15s cubic-bezier(.2,1.05,.4,1) 1.15s both,
                 introHover1 1.15s ease-in-out 2.35s infinite,
                 introBugKnocked .7s cubic-bezier(.3,.9,.4,1) 6.20s forwards;}
.ib2{animation:introChase2 1.15s cubic-bezier(.2,1.05,.4,1) 1.30s both,
            introHover2 1.3s ease-in-out 2.50s infinite,
            introBugKnocked .7s cubic-bezier(.3,.9,.4,1) 6.32s forwards;}
.ib3{animation:introChase3 1.2s cubic-bezier(.2,1.05,.4,1) 1.45s both,
            introHover3 1.45s ease-in-out 2.65s infinite,
            introBugKnocked .7s cubic-bezier(.3,.9,.4,1) 6.44s forwards;}
/* 被砸倒：闪白 → 眼睛变 X → 向侧倒 */
@keyframes introBugKnocked{
  0%{filter:brightness(1);}
  14%{filter:brightness(3.6) drop-shadow(0 0 16px #fff);}
  100%{opacity:.92;filter:none;transform:translate(-96px,104px) rotate(76deg) scale(.92);}
}

.intro-hearts{position:absolute;left:50%;top:50%;width:0;height:0;z-index:6;}
.intro-hearts img{position:absolute;width:34px;height:34px;opacity:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));}
.intro-hearts img:nth-child(1){left:-150px;top:-40px;animation:introHeart 1.7s ease-out 1.40s infinite;}
.intro-hearts img:nth-child(2){left:132px;top:-34px;width:28px;height:28px;animation:introHeart 1.9s ease-out 1.75s infinite;}
.intro-hearts img:nth-child(3){left:14px;top:-6px;width:24px;height:24px;animation:introHeart 1.6s ease-out 2.05s infinite;}
@keyframes introHeart{
  0%{opacity:0;transform:translateY(0) scale(.5);}
  25%{opacity:1;transform:translateY(-18px) scale(1.05);}
  100%{opacity:0;transform:translateY(-72px) scale(.7);}
}

/* ---- 格2：主角害怕发抖（抖线 + 蓝光） ---- */
.intro-shake{position:absolute;left:50%;top:50%;width:0;height:0;z-index:6;opacity:0;
  animation:introShow 1.7s ease 2.70s both;}
.intro-shake i{position:absolute;width:3px;height:22px;border-radius:2px;background:#7ce0ff;
  box-shadow:0 0 8px rgba(124,224,255,.9);}
.intro-shake i:nth-child(1){left:-128px;top:-30px;transform:rotate(-24deg);}
.intro-shake i:nth-child(2){left:-116px;top:6px;transform:rotate(-16deg);height:16px;}
.intro-shake i:nth-child(3){left:118px;top:-26px;transform:rotate(22deg);}
.intro-shake i:nth-child(4){left:108px;top:10px;transform:rotate(16deg);height:16px;}
@keyframes introShow{0%{opacity:0;}18%{opacity:1;}78%{opacity:1;}100%{opacity:0;}}
/* 主角整体发抖（叠加在 hero 容器上） */
.intro-hero{animation:introFloat 2.6s ease-in-out .95s infinite, introShiver .12s linear 2.70s 12;}
@keyframes introShiver{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* ---- 格3：主角生气（怒气符号 + 脸变红） ---- */
.intro-anger{position:absolute;left:50%;top:50%;margin-left:56px;margin-top:-104px;
  font-size:38px;opacity:0;z-index:7;filter:drop-shadow(0 0 10px rgba(255,60,60,.8));
  animation:introAnger .9s ease-in-out 4.45s 3 both;}
@keyframes introAnger{0%{opacity:0;transform:scale(.4) rotate(-12deg);}
  35%{opacity:1;transform:scale(1.18) rotate(6deg);}
  70%{opacity:1;transform:scale(1) rotate(-4deg);}
  100%{opacity:0;transform:scale(1.35);}}
.intro-hero img{animation:introPop .95s cubic-bezier(.18,1.5,.42,1) both,
                          introBlush 1.5s ease 4.50s both;}
@keyframes introBlush{0%{filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));}
  25%{filter:drop-shadow(0 0 26px rgba(255,60,60,.95)) saturate(1.5) brightness(1.06);}
  100%{filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));}}

/* ---- 格4：大便砸中 → 溅射 → 色狼晕倒 ---- */
.ip1{animation:introPoop1 .52s linear 5.55s both;}
.ip2{animation:introPoop2 .52s linear 5.70s both;}
.ip3{animation:introPoop3 .52s linear 5.85s both;}
.intro-splat{position:absolute;left:50%;top:50%;width:0;height:0;z-index:8;opacity:0;
  animation:introShow .9s ease-out 6.20s both;}
.intro-splat i{position:absolute;width:15px;height:15px;border-radius:50%;
  background:#7A522E;border:2px solid #2a1a0c;}
.intro-splat i:nth-child(1){--dx:-96px;--dy:-10px;}
.intro-splat i:nth-child(2){--dx:-120px;--dy:34px;}
.intro-splat i:nth-child(3){--dx:-62px;--dy:64px;}
.intro-splat i:nth-child(4){--dx:-150px;--dy:82px;}
.intro-splat i:nth-child(5){--dx:-34px;--dy:96px;}
.intro-splat i:nth-child(6){--dx:-172px;--dy:16px;}
.intro-splat i{animation:introSplat .75s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes introSplat{0%{opacity:1;transform:translate(0,0) scale(.3);}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25);}}
/* 标题与收尾时间后移 */
.intro-sub{animation-delay:8.30s !important;}
.boot-bar{animation-delay:8.42s !important;}
.boot-tip{animation-delay:8.52s !important;}