/* ==========================================================================
   寻找棍母 · 界面样式（由原 index.html 的 <style> 拆出）
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  position:fixed;inset:0;overflow:hidden;background:#030206;
  overscroll-behavior:none;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  font-family:'PingFang SC','Microsoft YaHei',system-ui,sans-serif;color:#f0e6ff;
}
#wrap{position:fixed;inset:0}
canvas{position:absolute;inset:0;display:block}

#vignette{
  position:absolute;inset:0;z-index:12;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(2,1,4,.85) 100%);
  box-shadow:inset 0 0 100px rgba(0,0,0,.8);
}
body.danger #vignette{animation:pulse-danger .6s infinite alternate}
@keyframes pulse-danger{0%{background:radial-gradient(ellipse at center,transparent 30%,rgba(180,10,30,.5) 100%)}100%{background:radial-gradient(ellipse at center,transparent 20%,rgba(220,10,40,.85) 100%)}}

#flash{position:absolute;inset:0;z-index:13;pointer-events:none;background:#ff1133;opacity:0;transition:opacity .35s ease-out}
#flash.on{opacity:.65;transition:none}
#crosshair{
  position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:#fff;z-index:14;pointer-events:none;box-shadow:0 0 12px #ff4400,0 0 4px #fff;
  transition:transform .08s ease;
}

#diag{
  position:absolute;top:calc(6px + env(safe-area-inset-top));left:8px;z-index:55;pointer-events:none;
  font:10px/1.4 ui-monospace,Consolas,monospace;color:#a89bc5;opacity:.85;max-width:75vw;white-space:pre-wrap;
  text-shadow:0 1px 3px #000;
}

#hud{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity .3s}
body[data-state="playing"] #hud,body[data-state="gate"] #hud{opacity:1}
#hud-top{
  position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:4px 16px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  font-family:ui-monospace,Consolas,monospace;font-size:clamp(14px,3.2vw,18px);font-weight:700;
  letter-spacing:1.5px;text-shadow:0 0 12px rgba(180,110,255,.9),0 2px 4px #000;
  background:linear-gradient(rgba(3,2,6,.95),rgba(3,2,6,.4) 70%,transparent);
}
#hud-top b{color:#d8b5ff}
#hud-stats{
  flex-basis:100%;display:flex;justify-content:center;gap:8px;
  font-size:.68em;font-weight:400;letter-spacing:1px;color:#a89bc5;text-shadow:none;
}
#h-gpm{color:#ffcc00}
#h-wapm{color:#ff6699}
#h-time{color:#77ffaa;transition:color .2s}
#h-time.low{color:#ff3355;animation:blink .4s infinite;text-shadow:0 0 16px #ff1133}
@keyframes blink{50%{opacity:.25}}
#h-spd{color:#70dcff}
#hud-bottom{
  position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:0;right:0;
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  font-size:12px;color:#a89bc5;font-family:ui-monospace,monospace;
}
.cd-pill{
  background:rgba(15,10,25,.85);border:1px solid #5a428c;border-radius:20px;padding:6px 16px;
  backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.6);transition:all .2s;
}
.cd-pill.ready{color:#77ffaa;border-color:#388050;box-shadow:0 0 10px rgba(119,255,170,.3)}
.cd-pill.act{color:#ffc850;border-color:#d49824;box-shadow:0 0 15px rgba(255,200,80,.5);transform:scale(1.05)}
body.touch .desktop-only{display:none!important}
body:not(.touch) .touch-only{display:none!important}

.floatmsg{
  position:absolute;left:50%;top:32%;transform:translateX(-50%);z-index:16;pointer-events:none;
  color:#ffe066;font-weight:900;font-size:clamp(22px,6vw,32px);
  text-shadow:0 0 16px rgba(255,210,50,.9),0 2px 6px #000;
  animation:fmsg 1.1s cubic-bezier(.15,.9,.3,1.2) forwards;white-space:nowrap;
}
@keyframes fmsg{0%{opacity:0;transform:translate(-50%,20px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.15)}80%{opacity:1;transform:translate(-50%,-20px) scale(1)}100%{opacity:0;transform:translate(-50%,-60px) scale(.9)}}

#mobile-controls{position:absolute;inset:0;z-index:20;display:none;pointer-events:none}
body.touch[data-state="playing"] #mobile-controls{display:block}
#look-zone{position:absolute;right:0;top:0;width:50%;height:100%;pointer-events:auto}
#joy-zone{position:absolute;left:0;top:0;width:50%;height:100%;pointer-events:auto}

#skills{
  position:absolute;right:calc(14px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:12px;pointer-events:auto;
}
.skill{
  position:relative;width:clamp(52px,13.5vw,66px);height:clamp(52px,13.5vw,66px);border-radius:50%;
  border:2px solid #8e62d4;background:rgba(25,15,44,.85);color:#f0e6ff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:inherit;touch-action:none;box-shadow:0 6px 16px rgba(0,0,0,.7);transition:transform .08s;
}
.skill.big{width:clamp(66px,17vw,82px);height:clamp(66px,17vw,82px)}
.skill.jump{border-color:#4ac0ff;box-shadow:0 0 20px rgba(74,192,255,.5)}
.skill.dash{border-color:#ff9933;box-shadow:0 0 20px rgba(255,153,51,.5)}
.skill .ico{font-size:clamp(20px,5.2vw,26px);line-height:1}
.skill .lb{font-size:clamp(10px,2.5vw,12px);font-weight:bold;opacity:.95}
.skill .cd{position:absolute;inset:-2px;border-radius:50%;pointer-events:none}
.skill:active{transform:scale(.88)}
#btn-fs{
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));
  width:42px;height:42px;border-radius:12px;border:1px solid #6b4fa3;background:rgba(20,12,36,.8);
  color:#d8b5ff;font-size:22px;pointer-events:auto;z-index:21;
}
#btn-exit{
  display:none;position:absolute;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));
  z-index:22;min-width:56px;height:42px;padding:0 12px;border-radius:12px;border:1px solid #6b4fa3;
  background:rgba(20,12,36,.8);color:#d8b5ff;font-family:inherit;font-size:13px;letter-spacing:1px;
  cursor:pointer;touch-action:manipulation;box-shadow:0 4px 12px rgba(0,0,0,.6);transition:transform .1s;
}
body[data-state="playing"] #btn-exit{display:block}
body.touch #btn-exit{right:calc(64px + env(safe-area-inset-right))}
#btn-exit:active{transform:scale(.94)}
#toast{
  position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:25;pointer-events:none;
  background:rgba(18,10,32,.95);border:1px solid #855ec9;border-radius:16px;
  padding:14px 26px;font-size:clamp(14px,3.6vw,17px);font-weight:bold;opacity:0;transition:opacity .3s;white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,.8),0 0 15px rgba(133,94,201,.4);
}
#toast.show{opacity:1}

.screen{
  position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:24px;
  background:radial-gradient(ellipse at center,#1d1038 0%,#040208 85%);
  opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.2,.8,.4,1);
}
body[data-state="start"] #screen-start,
body[data-state="lost"]  #screen-lost,
body[data-state="gate"]  #screen-gate{opacity:1;pointer-events:auto}

/* 主菜单：内容可能高于视口，需在 body 的 touch-action:none 之下显式放开纵向滚动 */
#screen-start{
  overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;justify-content:flex-start;
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
}
#screen-start .menu-inner{
  margin:auto;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:560px;
}
#screen-start .foot{position:static;margin-top:2px}
#st-menu{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
/* 素材未加载完时开始按钮不可点；不可达素材用警示色提示 */
#st-loading{margin-top:2px}
#st-loading:empty{display:none}
#st-credit{font-size:11px;color:#6d5994}
#st-credit:empty{display:none}
body[data-assets="loading"] .menu-btn{opacity:.45;pointer-events:none;filter:grayscale(.4)}
body[data-assets="partial"] #st-loading{color:#ffaa33}
.menu-btn{
  flex:1 1 200px;max-width:260px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 22px;border-radius:16px;border:2px solid #6b4fa3;background:rgba(30,16,58,.9);color:#fff;
  font-family:inherit;cursor:pointer;touch-action:manipulation;
  box-shadow:0 6px 16px rgba(0,0,0,.6);transition:transform .1s,border-color .2s,box-shadow .2s;
}
.menu-btn b{font-size:clamp(17px,4.6vw,21px);font-weight:800;letter-spacing:3px}
.menu-btn i{font-style:normal;font-size:clamp(11px,3vw,13px);color:#a89bc5;letter-spacing:1px}
.menu-btn.primary{border-color:#b87aff;background:#3a1276;box-shadow:0 0 26px rgba(184,122,255,.55),0 6px 16px rgba(0,0,0,.6)}
.menu-btn.primary i{color:#d8b5ff}
.menu-btn:active{transform:scale(.94)}
#st-rules{display:flex;flex-direction:column;gap:6px;max-width:92vw}
#st-rules .hint{line-height:1.7}
#st-settings{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mini-btn{
  padding:9px 18px;border-radius:12px;border:1px solid #6b4fa3;background:rgba(20,12,36,.85);color:#d8b5ff;
  font-family:inherit;font-size:13px;letter-spacing:1px;cursor:pointer;touch-action:manipulation;transition:transform .1s;
}
.mini-btn:active{transform:scale(.94)}
#screen-start h1{font-size:clamp(34px,9vw,60px);font-weight:900;letter-spacing:6px;text-shadow:0 0 25px #9944ff,0 0 60px #5500aa}
#screen-start h1 span{font-size:.45em;color:#ffaa33;border:2px solid #ffaa33;border-radius:10px;padding:3px 12px;vertical-align:middle;box-shadow:0 0 12px rgba(255,170,51,.4)}
.bang{color:#ff3355;font-size:clamp(16px,4.5vw,24px);letter-spacing:5px;font-weight:800;text-shadow:0 0 16px #ff3355}
.lead{font-size:clamp(15px,4.2vw,20px);color:#d0c2ee;line-height:1.9;max-width:88vw}
#blank{color:#ffcc00;font-weight:900;text-shadow:0 0 14px #ffcc00}
.hint{font-size:clamp(12px,3vw,14px);color:#a89bc5;font-family:ui-monospace,monospace;max-width:92vw}
.foot{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));font-size:12px;color:#6d5994;font-family:ui-monospace,monospace}
#screen-gate{background:radial-gradient(ellipse at center,rgba(130,40,240,.7),rgba(4,2,8,.98) 85%)}
.gate-text{font-size:clamp(22px,6.5vw,38px);font-weight:900;letter-spacing:5px;color:#f5ebff;text-shadow:0 0 30px #b06aff;animation:pulse-danger 1s infinite alternate}
#screen-lost h2{font-size:clamp(30px,8vw,52px);font-weight:900;color:#ff3355;letter-spacing:5px;text-shadow:0 0 25px #ff1133}
.stats{color:#d0c2ee;font-size:clamp(15px,4vw,20px)}
.stats b{color:#ffcc00}
#btn-retry{
  padding:16px 52px;font-size:clamp(17px,4.8vw,22px);font-weight:800;letter-spacing:4px;
  background:#5219a8;color:#fff;border:2px solid #b87aff;border-radius:16px;font-family:inherit;
  box-shadow:0 0 32px rgba(184,122,255,.6),0 6px 16px rgba(0,0,0,.6);cursor:pointer;transition:transform .1s;
}
#btn-retry:active{transform:scale(.94)}
#lost-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:14px}
#btn-menu{
  padding:14px 30px;font-size:clamp(14px,3.8vw,17px);font-weight:700;letter-spacing:3px;
  background:rgba(20,12,36,.9);color:#d8b5ff;border:2px solid #6b4fa3;border-radius:16px;font-family:inherit;
  box-shadow:0 4px 14px rgba(0,0,0,.6);cursor:pointer;touch-action:manipulation;transition:transform .1s;
}
#btn-menu:active{transform:scale(.94)}