/* ══════════════════════════════════════════════════════════════
   《呛水的鱼》恶搞模拟器 — 视觉方向：「深夜街机厅 × 课桌涂鸦」
   · 颜色有职能：品红＝主线/标题，橙＝武器(伤害)，青＝整蛊(非伤害)，黄＝奖励/雷霆
   · 有材质：CRT 扫描线 + 颗粒噪点 + 网点分隔条 + 手撕胶带
   · 圆角分三级(2px 标签 / 10px 卡片 / 22px 主按钮)，不统一；贴纸故意歪
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink:#100c14;
  --ink2:#1b1420;
  --playL:0px;           /* 玩区左边界：抽屉打开时由 JS 写入，HUD 与实体都让开它 */
  --pink:#ff2e88;
  --orange:#ff6b1a;
  --cyan:#21e6c1;
  --yellow:#ffd23f;
  --paper:#f7ecd9;
  --stroke:rgba(8,4,10,.85);
  --pop:cubic-bezier(.2,1.5,.4,1);
  --silk:cubic-bezier(.22,1.12,.28,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--ink);}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:#fff;user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
#app{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:none;overflow:hidden}
.screen.on{display:block}

/* 全局颗粒噪点（材质，别用纯色矢量） */
#app::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
/* CRT 扫描线 */
#app::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}

/* ══ 开屏 ══════════════════════════════════════════════════════ */
#splash{background:radial-gradient(120% 90% at 50% 120%,#0b3a44 0%,#071722 45%,#05060c 100%)}
.splash-bg{
  position:absolute;inset:-10%;
  background:
    repeating-linear-gradient(0deg,rgba(33,230,193,.10) 0 2px,transparent 2px 26px),
    radial-gradient(closest-side,rgba(33,230,193,.18),transparent 70%);
  filter:blur(.4px);animation:drift 6s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,1%,0) scale(1.02)}to{transform:translate3d(2%,-1%,0) scale(1.06)}}
.bubbles{position:absolute;inset:0}
.bubbles i{position:absolute;bottom:-40px;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(180,255,245,.55);background:rgba(33,230,193,.12);
  animation:rise 3.4s linear infinite}
.bubbles i:nth-child(1){left:16%;animation-delay:0s;transform:scale(.7)}
.bubbles i:nth-child(2){left:34%;animation-delay:.5s}
.bubbles i:nth-child(3){left:52%;animation-delay:1.1s;transform:scale(1.3)}
.bubbles i:nth-child(4){left:68%;animation-delay:.2s;transform:scale(.9)}
.bubbles i:nth-child(5){left:80%;animation-delay:1.6s}
.bubbles i:nth-child(6){left:26%;animation-delay:2.2s;transform:scale(1.1)}
@keyframes rise{0%{bottom:-40px;opacity:0}12%{opacity:.9}100%{bottom:106%;opacity:0}}
.fish{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:84px;
  opacity:0;animation:fishIn .5s var(--pop) .35s forwards, struggle .16s linear .9s infinite;
  filter:drop-shadow(0 0 22px rgba(33,230,193,.5));
}
@keyframes fishIn{from{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-25deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes struggle{0%{transform:translate(-50%,-50%) rotate(-9deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(9deg) scale(1.06)}100%{transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}
.splash-line{position:absolute;left:0;right:0;text-align:center;font-weight:800;letter-spacing:2px;opacity:0;transition:opacity .3s,transform .45s var(--pop)}
.splash-line.l1{top:60%;font-size:17px;color:rgba(200,255,250,.75);transform:translateY(14px)}
.splash-line.l2{top:66%;font-size:19px;color:#d9fff9;transform:translateY(14px)}
.splash-line.l3{top:74%;font-size:22px;color:var(--yellow);text-shadow:0 0 16px rgba(255,210,63,.8);transform:scale(.7)}
#splash.hit1 .l1{opacity:1;transform:translateY(0)}
#splash.hit2 .l2{opacity:1;transform:translateY(0)}
#splash.hit3 .l3{opacity:1;transform:scale(1)}
#splash.hit2{animation:flash .22s linear}
@keyframes flash{0%,100%{filter:none}40%{filter:brightness(2.6) saturate(.3)}}
.splash-title{
  position:absolute;left:0;right:0;top:30%;margin:0;text-align:center;
  font-size:clamp(46px,17vw,86px);font-weight:900;letter-spacing:4px;
  color:#fff;opacity:0;
  text-shadow:0 0 0 #000,4px 4px 0 var(--pink),-3px -3px 0 var(--cyan),0 0 34px rgba(255,46,136,.75);
  -webkit-text-stroke:2px rgba(10,6,12,.6);
}
#splash.hit3 .splash-title{animation:slam .5s var(--pop) forwards}
@keyframes slam{
  0%{opacity:0;transform:scale(3.6) rotate(-9deg)}
  60%{opacity:1;transform:scale(.92) rotate(1.5deg)}
  100%{opacity:1;transform:scale(1) rotate(-1.2deg)}
}
.splash-sub{position:absolute;left:0;right:0;top:calc(30% + clamp(58px,20vw,100px));text-align:center;
  font-size:14px;letter-spacing:3px;color:rgba(255,255,255,.6);opacity:0;transition:opacity .5s .35s}
#splash.hit3 .splash-sub{opacity:1}
.skip-hint{position:absolute;bottom:calc(74px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.35);
  animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:.7}}

/* ══ 主页 ══════════════════════════════════════════════════════ */
#home{background:
  radial-gradient(80% 60% at 12% 0%,rgba(255,46,136,.30),transparent 60%),
  radial-gradient(70% 60% at 96% 18%,rgba(33,230,193,.22),transparent 62%),
  linear-gradient(180deg,#150f1b 0%,#0d0912 60%,#080610 100%)}
.home-bg{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);
  background-size:16px 16px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%)}
.home-wrap{position:relative;height:100%;padding:calc(34px + env(safe-area-inset-top)) 22px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;max-width:520px;margin:0 auto}
.tape{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;width:154px;height:32px;
  transform:translateX(-50%) rotate(-2.4deg);
  background:
    repeating-linear-gradient(90deg,#15101c 0 2px,transparent 2px 4px,#15101c 4px 7px,transparent 7px 12px) 14px center/94px 15px no-repeat,
    linear-gradient(180deg,rgba(247,236,217,.34),rgba(247,236,217,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 3px 12px rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.kicker{margin:18px 0 0;font-size:12px;letter-spacing:4px;color:rgba(255,255,255,.5);text-align:center}
.thanks{margin:2px 0 0;text-align:center;font-size:clamp(40px,14.5vw,68px);line-height:1.02;font-weight:900;letter-spacing:2px;
  transform:rotate(-1.5deg);
  text-shadow:3px 3px 0 rgba(255,46,136,.9),-3px -3px 0 rgba(33,230,193,.55),0 0 30px rgba(255,46,136,.5)}
.thanks em{font-style:normal;color:var(--yellow);text-shadow:4px 4px 0 rgba(255,46,136,.75),0 0 26px rgba(255,210,63,.7)}
.thanks-sub{margin:6px 0 16px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.45);letter-spacing:1px}
.modes{display:flex;flex-direction:column;gap:12px}
.mode{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:15px 18px;border:0;text-align:left;font-family:inherit;color:#fff;cursor:pointer;
  transition:transform .13s var(--pop),filter .2s;
}
.mode:active{transform:scale(.955) translateY(2px)}
.mode .m-tag{font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;padding:3px 7px;border-radius:2px;background:rgba(0,0,0,.35)}
.mode .m-name{font-size:21px;font-weight:900;letter-spacing:1px}
.mode .m-desc{font-size:11.5px;opacity:.72}
.mode.primary{
  border-radius:22px 8px 22px 8px;
  background:linear-gradient(135deg,var(--pink) 0%,#a4137f 55%,#5d0f5e 100%);
  box-shadow:0 10px 0 -3px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28),0 0 34px rgba(255,46,136,.35);
}
.mode.primary::after{content:"▶";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px;opacity:.9}
.mode.ghost{
  border-radius:10px;color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.mode.ghost .m-tag{background:rgba(255,255,255,.10)}
.foot{margin:16px 0 0;text-align:center;font-size:10.5px;line-height:1.7;color:rgba(255,255,255,.32)}

/* ══ 自由模式 ══════════════════════════════════════════════════ */
#game{background:#0b0810}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}

#hud{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px}
#hud button{font-family:inherit;border:0;cursor:pointer;color:#fff;
  background:rgba(12,8,14,.72);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);
  border-radius:8px;padding:8px 11px;font-size:13px;font-weight:700}
#hud button:active{transform:scale(.94)}
.combo{flex:1;text-align:center;font:900 20px/1 "PingFang SC",sans-serif;color:var(--yellow);
  text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 16px rgba(255,210,63,.6);transform:rotate(-2deg)}
.hud-right{display:flex;align-items:center;gap:6px}
.score{font:900 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6)}

/* ── 道具栏：开局自动丝滑展开 ─────────────────────────────── */
#drawer{position:absolute;left:0;top:0;bottom:0;z-index:30;display:flex;align-items:center;
  transition:transform .58s var(--silk);will-change:transform}
#drawer.closed{transform:translateX(calc(-100% + 30px))}
#handle{writing-mode:vertical-rl;font-family:inherit;font-weight:900;font-size:11px;letter-spacing:2px;
  color:#0d0710;cursor:pointer;border:0;padding:14px 6px;border-radius:0 9px 9px 0;
  background:linear-gradient(180deg,var(--yellow),var(--orange));
  box-shadow:2px 0 12px rgba(0,0,0,.5)}
.drawer-body{
  height:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(50px + env(safe-area-inset-top)) 7px 26px 7px;
  display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(180deg,rgba(14,9,17,.94),rgba(20,12,24,.9));
  border-right:2px solid rgba(0,0,0,.6);
  box-shadow:14px 0 34px rgba(0,0,0,.55);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.15) 100%);
  scrollbar-width:none}
.drawer-body::-webkit-scrollbar{display:none}
.cat{border-radius:10px 3px 10px 3px;padding:6px 5px 7px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.4)}
.cat-weapon{background:linear-gradient(180deg,rgba(255,107,26,.34),rgba(120,38,10,.34))}
.cat-prank{background:linear-gradient(180deg,rgba(33,230,193,.28),rgba(8,80,72,.34))}
.cat-title{margin:0 0 7px;text-align:center;font-size:10.5px;font-weight:900;letter-spacing:3px;
  color:#fff;opacity:.92;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.cat-weapon .cat-title{color:#ffd7ba}
.cat-prank .cat-title{color:#c6fff4}
.divider{display:flex;align-items:center;gap:6px;padding:3px 2px;color:rgba(255,255,255,.4);
  font-size:9px;letter-spacing:1px}
.divider::before,.divider::after{content:"";flex:1;height:0;border-top:2px dashed rgba(255,255,255,.22)}
.item{
  display:flex;flex-direction:column;align-items:center;gap:1px;width:52px;padding:6px 3px 7px;
  border:0;cursor:pointer;font-family:inherit;color:#fff;
  background:rgba(255,255,255,.06);border-radius:6px 6px 12px 6px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.13);
  transition:transform .34s var(--pop),opacity .3s,background .18s,box-shadow .18s;
  opacity:0;transform:translateX(-22px) scale(.9)
}
#drawer:not(.closed) .item{opacity:1;transform:none}
.item .ic{font-size:19px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.item .nm{font-size:9px;letter-spacing:.3px;opacity:.9}
.item:active{transform:scale(.9)}
.item.sel{
  background:linear-gradient(180deg,var(--yellow),var(--orange));
  color:#1a0f06;transform:rotate(-2deg) scale(1.055);
  box-shadow:0 0 0 2px #fff,0 6px 14px rgba(0,0,0,.5),0 0 22px rgba(255,210,63,.5)
}
.item.sel .nm{opacity:1;font-weight:900}

/* 提示条 / 雷霆按钮 / toast —— 一律在「玩区」（抽屉右侧）居中，不会被抽屉压住；
   底部再抬高一层：Netlify 免费版注入的徽标 iframe 占 right-bottom 197x64（见 .shots/live 量测）*/
#hint{position:absolute;left:calc(50% + var(--playL) / 2);bottom:calc(142px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:20;padding:7px 13px;border-radius:3px;white-space:nowrap;
  font-size:11.5px;font-weight:700;color:#20130a;
  background:linear-gradient(90deg,var(--yellow),#ffb03a);
  box-shadow:0 4px 0 rgba(0,0,0,.45);transform-origin:center;animation:hintBob 2.4s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-4px) rotate(1deg)}}
#thunderBtn{position:absolute;left:calc(50% + var(--playL) / 2);bottom:calc(74px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:25;width:132px;height:60px;border:0;cursor:pointer;font-family:inherit;
  border-radius:50% 50% 44% 44%/60% 60% 40% 40%;color:#2a1a05;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 10%,#fff3b0,var(--yellow) 40%,#c98b06 100%);
  box-shadow:0 7px 0 rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.6),0 0 0 3px rgba(10,6,12,.85);
  transition:transform .12s var(--pop),filter .2s}
#thunderBtn b{position:relative;z-index:2;font-size:16px;font-weight:900;letter-spacing:1px}
#thunderBtn i{position:absolute;left:0;bottom:0;width:var(--p,0%);height:100%;z-index:1;border-radius:0 40% 40% 0/0 50% 50% 0;
  background:linear-gradient(0deg,rgba(255,46,136,.62),rgba(255,46,136,.18));
  box-shadow:0 0 12px rgba(255,46,136,.7),inset -2px 0 7px rgba(255,255,255,.28);transition:width .2s linear}
#thunderBtn:active{transform:translateX(-50%) scale(.93)}
#thunderBtn.ready{animation:readyPulse .9s ease-in-out infinite;filter:saturate(1.2)}
@keyframes readyPulse{0%,100%{box-shadow:0 7px 0 rgba(0,0,0,.5),0 0 0 3px rgba(10,6,12,.85),0 0 16px rgba(255,210,63,.7)}50%{box-shadow:0 7px 0 rgba(0,0,0,.5),0 0 0 3px rgba(10,6,12,.85),0 0 34px rgba(255,210,63,1)}}
#thunderBtn.fire{animation:fireShake .4s var(--pop)}
@keyframes fireShake{0%{transform:translateX(-50%) scale(1.25) rotate(-6deg)}100%{transform:translateX(-50%) scale(1) rotate(0)}}
#toast{position:absolute;left:calc(50% + var(--playL) / 2);top:34%;transform:translate(-50%,-10px) scale(.9);z-index:40;
  padding:9px 15px;border-radius:6px;font-size:13px;font-weight:800;color:#0f0a12;white-space:nowrap;
  background:linear-gradient(90deg,var(--cyan),#8ff6e2);opacity:0;pointer-events:none;
  box-shadow:0 5px 0 rgba(0,0,0,.45);transition:opacity .22s,transform .3s var(--pop)}
#toast.on{opacity:1;transform:translate(-50%,0) scale(1) rotate(-1.4deg)}
/* 主页也共用这条提示条：落到页脚上方，别压住「感谢司佳鑫」大标题 */
#home.on ~ #toast{top:auto;bottom:calc(154px + env(safe-area-inset-bottom))}

/* ── 入场跳窗：宇宙级免责声明 ──────────────────────────────────
   故意换成「手写纸条」材质：全场都是暗色霓虹，只有这一块是被人贴上去的纸，
   对比本身就是去 AI 味的那一下（颜色有职能、材质不同、贴纸是歪的） */
#oath{position:absolute;inset:0;z-index:60;display:none;place-items:center;padding:20px}
#oath.on{display:grid}
#oath::before{content:"";position:absolute;inset:0;background:rgba(9,4,14,.74);backdrop-filter:blur(3px)}
.oath-card{position:relative;z-index:1;width:min(430px,100%);max-height:100%;overflow-y:auto;
  padding:26px 20px 15px;color:#2a1c12;transform:rotate(-1.2deg);border-radius:5px 15px 6px 17px;
  background:linear-gradient(178deg,#f9f1e0,#ecdcbb 62%,#e3d1ac);
  box-shadow:0 20px 44px rgba(0,0,0,.6),inset 0 0 0 1px rgba(122,92,58,.28)}
.oath-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(122,92,58,.07) 0 1px,transparent 1px 4px)}
.oath-tape{position:absolute;top:-13px;left:50%;width:116px;height:26px;transform:translateX(-50%) rotate(-2.8deg);
  background:rgba(255,246,218,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  border-left:2px dashed rgba(140,108,74,.4);border-right:2px dashed rgba(140,108,74,.4)}
.oath-kicker{margin:0 0 6px;font-size:10px;letter-spacing:2px;font-weight:800;color:#9a6b3a}
#oathTitle{margin:0 0 11px;font-size:24px;font-weight:900;letter-spacing:1px;color:#241608}
.oath-list{margin:0 0 12px;padding:0 0 0 19px;font-size:12.5px;line-height:1.75;color:#3a2716}
.oath-list li{margin-bottom:5px}
.oath-list li::marker{color:#c8323c;font-weight:900}
.oath-list b{background:linear-gradient(180deg,transparent 62%,rgba(255,46,136,.35) 62%);padding:0 1px}
.oath-foot{margin:0 0 12px;font-size:11.5px;font-style:italic;color:#7c5a35}
#oathOk{display:block;width:100%;padding:13px 12px;border:0;cursor:pointer;font-family:inherit;letter-spacing:1px;
  font-size:16px;font-weight:900;color:#1b1206;border-radius:3px 13px 4px 11px;
  background:linear-gradient(180deg,#ffe07a,#ffb01f);
  box-shadow:0 5px 0 #a8630a,0 8px 16px rgba(0,0,0,.35);transition:transform .12s var(--pop),box-shadow .12s}
#oathOk em{font-style:normal;font-size:12px;font-weight:700;color:#6b4410}
#oathOk:active{transform:translateY(4px);box-shadow:0 1px 0 #a8630a,0 3px 8px rgba(0,0,0,.35)}
.oath-tip{margin:9px 0 0;font-size:10px;letter-spacing:.4px;text-align:center;color:#8d6a42}
.oath-stamp{position:absolute;right:13px;bottom:52px;writing-mode:vertical-rl;padding:4px 3px;
  font-size:11px;font-weight:900;letter-spacing:3px;color:rgba(200,32,44,.6);transform:rotate(-8deg);
  border:2px solid rgba(200,32,44,.48);border-radius:40% 40% 46% 46%/50% 50% 44% 44%}

@media (max-height:620px){
  .thanks{font-size:clamp(32px,12vw,52px)}
  .mode{padding:11px 15px}
  .mode .m-name{font-size:18px}
  #oathTitle{font-size:20px}
  .oath-list{font-size:11.5px;line-height:1.6}
}