/* 第 4 关：画墙挡蛇，作用域 .sn */
.sn{position:absolute;inset:0;overflow:hidden;background-color:#ffd6e2;background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),radial-gradient(#ffb3c6 1.5px,transparent 1.7px);background-size:100% 100%,18px 18px;touch-action:none}
.sn-hp{position:absolute;left:20px;right:20px;top:12px;height:22px;background:rgba(0,0,0,.15);border:3px solid #1c1c30;border-radius:12px;overflow:hidden;z-index:3}
.sn-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff4f7b,#ff8fa3);transform-origin:left;transition:transform .15s}
.sn-hp span{position:absolute;inset:0;text-align:center;font-size:12px;font-weight:900;line-height:16px;color:#1c1c30}
.sn-ink{position:absolute;left:20px;right:20px;top:38px;height:12px;background:rgba(0,0,0,.12);border:2px solid #1c1c30;border-radius:8px;overflow:hidden;z-index:3}
.sn-ink i{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#ffb703);transform-origin:left}
.sn-ink span{position:absolute;inset:0;text-align:center;font-size:9px;font-weight:900;line-height:8px;color:#1c1c30}
.sn-tip{position:absolute;left:0;right:0;top:56px;text-align:center;font-size:12px;color:#7a2a45;font-weight:700}

/* 爱心 + 脚下的聚光灯 */
.sn-spot{position:absolute;left:180px;top:346px;width:150px;height:56px;margin:-28px 0 0 -75px;border-radius:50%;background:radial-gradient(rgba(255,255,255,.8),rgba(255,255,255,0) 70%);transition:left .35s cubic-bezier(.2,1.4,.4,1),top .35s cubic-bezier(.2,1.4,.4,1);z-index:0;pointer-events:none}
.sn-heart{position:absolute;left:180px;top:320px;width:70px;height:70px;margin:-35px 0 0 -35px;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));transition:transform .3s,left .35s cubic-bezier(.2,1.4,.4,1),top .35s cubic-bezier(.2,1.4,.4,1)}
.sn-heart .art{position:absolute;inset:0}
.sn-heart b{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);font-size:18px;color:#fff;font-weight:900;text-shadow:0 0 4px #1c1c30,0 0 4px #1c1c30}
.sn-heart.ouch{animation:snouch .3s}
@keyframes snouch{0%,100%{transform:none}25%{transform:translate(-6px,2px) scale(.9)}75%{transform:translate(6px,-2px) scale(.9)}}
.sn-heart.dash{animation:sndash .4s}
@keyframes sndash{0%{transform:scale(1)}40%{transform:scale(.6) rotate(-20deg)}100%{transform:scale(1)}}
.sn-heart.broken{filter:grayscale(1) brightness(.7)}

/* 墙 */
.sn-walls{position:absolute;left:0;top:0;width:360px;height:640px;z-index:1;pointer-events:none;overflow:visible}
.sn-walls polyline{fill:none;stroke:#ffd166;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 0 #b8860b)}

/* 蛇 */
.sn-snake{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3))}
.sn-snake.boss{filter:drop-shadow(0 0 8px rgba(0,0,0,.6))}
.sn-snake.hurt{filter:brightness(1.8) drop-shadow(0 0 6px #ff4d4d)}
.sn-snake.dead{animation:sndead .28s ease-out both}
@keyframes sndead{from{transform:scale(.6)}to{opacity:0}}
.sn-letter{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;z-index:2;animation:snfloat 1s ease-in-out infinite alternate;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
@keyframes snfloat{from{margin-top:-20px}to{margin-top:-28px}}
.sn-letter.got{animation:sngot .4s ease-out both}
@keyframes sngot{to{transform:translateY(-30px) scale(1.5);opacity:0}}
.sn-warn{position:absolute;left:50%;top:100px;transform:translateX(-50%);background:#1c1c30;color:#ffd166;font-weight:900;font-size:15px;padding:6px 14px;border-radius:999px;opacity:0;transition:opacity .1s;z-index:6;white-space:nowrap;pointer-events:none}
.sn-warn.on{opacity:1;animation:snwarn .3s linear infinite alternate}
@keyframes snwarn{to{transform:translateX(-50%) scale(1.08)}}
.sn-toast{position:absolute;left:50%;top:560px;transform:translateX(-50%);background:#fff;color:#1c1c30;font-weight:900;font-size:13px;padding:4px 12px;border-radius:999px;border:3px solid #1c1c30;box-shadow:3px 3px 0 #1c1c30;opacity:0;transition:opacity .1s;z-index:6;white-space:nowrap;pointer-events:none}
.sn-toast.on{opacity:1}

/* 反手掏出的 reputation */
.sn-rep{position:absolute;left:50%;top:215px;width:170px;height:170px;margin:-85px 0 0 -85px;z-index:5;animation:snrep .5s cubic-bezier(.2,1.5,.4,1) both;transform-origin:center;border:4px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.5);overflow:hidden}
@keyframes snrep{from{transform:scale(.2) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(-6deg);opacity:1}}
.sn-say{position:absolute;left:50%;top:80px;transform:translateX(-50%);background:#fff;border:3px solid #1c1c30;box-shadow:3px 3px 0 #1c1c30;border-radius:12px;padding:8px 12px;font-weight:900;font-size:15px;white-space:nowrap;z-index:6}

.sn-wall-status{position:absolute;top:77px;left:20px;right:20px;text-align:center;font-size:11px;color:#fff4d7;text-shadow:0 1px 3px #171524;pointer-events:none;z-index:3}.sn-walls polyline.aging{stroke-dasharray:10 8;stroke:#ffe9a6}.sn-walls polyline.cracked{stroke-dasharray:12 4 3 4;stroke:#ffb970}.sn-walls polyline.shattered{stroke-dasharray:3 14;stroke:#fff4d9;opacity:.65;stroke-width:5;pointer-events:none}