/* 第 12 关：TTPD 打字机横板卷轴（黑白世界，只有乐评有颜色），作用域 .tp */
.tp{position:absolute;inset:0;overflow:hidden;background:#1a1a1a;touch-action:none;user-select:none}
.tp-world{position:absolute;left:0;top:0;width:4800px;height:520px;will-change:transform}
.tp-scene{position:absolute;top:0;width:1200px;height:520px}
.tp-scene .art{width:100%;height:100%}
.tp-rain{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;background:repeating-linear-gradient(112deg,rgba(255,255,255,0) 0 22px,rgba(255,255,255,.12) 22px 23px,rgba(255,255,255,0) 23px 40px);animation:tprain .5s linear infinite}
.tp.raining .tp-rain{opacity:1}
@keyframes tprain{from{background-position:0 0}to{background-position:-40px 120px}}
.tp-flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0}
.tp-flash.on{animation:tpflash .5s ease-out forwards}
@keyframes tpflash{0%{opacity:.85}30%{opacity:.2}45%{opacity:.6}100%{opacity:0}}
.tp-grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");z-index:7}
.tp::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);z-index:7}

/* 打字机 */
.tp-player{position:absolute;left:0;top:0;width:100px;height:90px;z-index:4;will-change:transform}
.tp-tw{position:absolute;inset:0;transition:filter .15s}
.tp-tw .tw-mouth-open,.tp-tw .tw-mouth-full{display:none}
.tp-tw.inhale .tw-mouth-open{display:block}
.tp-tw.inhale .tw-mouth-idle{display:none}
.tp-tw.full .tw-mouth-full{display:block}
.tp-tw.full .tw-mouth-idle{display:none}
.tp-tw.full{transform:scale(1.08);transform-origin:50% 100%}
.tp-tw.spit{transform:scale(1.15,.92);transform-origin:50% 100%}
.tp-tw.hurt{filter:brightness(2.2) contrast(1.4)}
.tp-tw.hurt .tw-eyes{opacity:0}
.tp-tw.hurt .tw-eyes-x{opacity:1}
.tp-tw.dead{transform:rotate(90deg) translateY(20px);transform-origin:50% 100%;filter:grayscale(1) brightness(.6)}
.tp-tw.pose{animation:tppose .5s ease-in-out infinite alternate}
@keyframes tppose{from{transform:translateY(0)}to{transform:translateY(-10px) rotate(-6deg)}}
.tp-tw .ft.a{animation:tpfoot .3s steps(1) infinite}
.tp-tw .ft.b{animation:tpfoot .3s .15s steps(1) infinite}
@keyframes tpfoot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tp-tw.air .ft{animation:none;transform:translateY(-2px)}
.tp-tw:not(.air){animation:tpwalk .3s ease-in-out infinite alternate}
@keyframes tpwalk{from{transform:translateY(0)}to{transform:translateY(-2px)}}
.tp-player.good .tp-tw{filter:drop-shadow(0 0 10px #ffd166)}
.tp-player.mid .tp-tw{filter:drop-shadow(0 0 8px #9aa)}
.tp-suck{position:absolute;left:90px;top:26px;width:130px;height:80px;opacity:0;pointer-events:none}
.tp-player .tp-tw.inhale~.tp-suck,.tp-player:has(.tp-tw.inhale) .tp-suck{opacity:1;animation:tpsuck .35s linear infinite}
@keyframes tpsuck{from{transform:translateX(12px) scaleX(1.1)}to{transform:translateX(0) scaleX(.9)}}

/* 乐评卡片（唯一有颜色的东西） */
.tp-cards{position:absolute;inset:0;pointer-events:none;z-index:3}
.tp-card{position:absolute;left:0;top:0;width:92px;height:66px;margin:-33px 0 0 -46px;background:#f6f1e6;border:2px solid #1c1c30;border-radius:4px;box-shadow:3px 3px 0 #1c1c30;padding:4px 6px;font-size:9px;line-height:1.1;color:#333;will-change:transform}
.tp-card b{display:block;font-size:9px;font-weight:900;color:#1c1c30;white-space:nowrap;overflow:hidden}
.tp-card i{display:block;font-style:normal;font-size:8px;letter-spacing:1px;color:#c9a227}
.tp-card em{position:absolute;right:6px;top:14px;font-style:normal;font-size:26px;font-weight:900;font-family:Georgia,serif;color:#1c1c30;line-height:1}
.tp-card span{position:absolute;left:6px;bottom:8px;width:40px;height:14px;background:repeating-linear-gradient(#bbb 0 2px,transparent 2px 5px)}
.tp-card u{position:absolute;text-decoration:none;font-weight:900;font-size:10px;padding:1px 4px;border:1.5px solid;border-radius:3px;transform:rotate(-10deg)}
.tp-card u.ok{right:4px;bottom:6px;color:#2a8a4a;border-color:#2a8a4a}
.tp-card u.so{right:4px;bottom:6px;color:#666;border-color:#666}
.tp-card u.sh{right:4px;bottom:4px;color:#c8102e;border-color:#c8102e;font-size:16px;padding:0 4px}
.tp-card var{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font-style:normal;font-size:13px;font-weight:900;color:#ffd166;white-space:nowrap;text-shadow:0 1px 2px #000,0 0 6px #000}
.tp-card.good{background:linear-gradient(#fff7d6,#ffe39a);box-shadow:3px 3px 0 #1c1c30,0 0 16px #ffd166}
.tp-card.good em{color:#b8860b}
.tp-card.mid{background:linear-gradient(#e9e9e9,#cfcfcf)}
.tp-card.bad{background:linear-gradient(#ffd9d9,#f2a3a3);box-shadow:3px 3px 0 #1c1c30,0 0 12px #ff4d4d}
.tp-card.bad em{color:#c8102e}
.tp-card.bad i{color:#c8102e}
.tp-card.pull{transition:none}
.tp-shots{position:absolute;inset:0;pointer-events:none;z-index:5}
.tp-shot{position:absolute;left:0;top:0;width:40px;height:30px;margin:-15px 0 0 -20px;background:#ffe39a;border:2px solid #1c1c30;border-radius:3px;box-shadow:0 0 12px #ffd166;display:flex;align-items:center;justify-content:center}
.tp-shot em{font-style:normal;font-size:15px;font-weight:900;font-family:Georgia,serif;color:#b8860b}
.tp-shot.mid{background:#ddd;box-shadow:none}
.tp-shot.mid em{color:#666}

/* boss：巨大差评 */
.tp-boss{position:absolute;left:0;top:0;width:180px;height:140px;margin:-70px 0 0 -90px;z-index:3;filter:drop-shadow(0 0 18px #ff4d4d);will-change:transform}
.tp-boss-card{position:absolute;inset:0;background:linear-gradient(#ffd0d0,#e88a8a);border:3px solid #1c1c30;border-radius:6px;box-shadow:5px 5px 0 #1c1c30;padding:8px 10px;color:#333}
.tp-boss-card b{display:block;font-size:13px;font-weight:900;color:#1c1c30}
.tp-boss-card i{display:block;font-style:normal;font-size:11px;color:#c8102e;letter-spacing:2px}
.tp-boss-card em{position:absolute;right:12px;top:22px;font-style:normal;font-size:58px;font-weight:900;font-family:Georgia,serif;color:#c8102e;line-height:1}
.tp-boss-card span{position:absolute;left:10px;bottom:14px;width:70px;height:22px;background:repeating-linear-gradient(#a55 0 3px,transparent 3px 7px)}
.tp-boss-card u{position:absolute;right:8px;bottom:6px;text-decoration:none;font-weight:900;font-size:30px;color:#c8102e;border:3px solid #c8102e;border-radius:4px;padding:0 6px;transform:rotate(-12deg)}
.tp-boss-face{position:absolute;left:14px;top:46px;width:70px;height:40px}
.tp-boss-face s{position:absolute;top:8px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #1c1c30}
.tp-boss-face s:first-child{left:6px}.tp-boss-face s:last-child{left:40px}
.tp-boss-face s::after{content:'';position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:#1c1c30}
.tp-boss-face s::before{content:'';position:absolute;left:-2px;top:-6px;width:26px;height:4px;background:#1c1c30;transform:rotate(18deg)}
.tp-boss-face s:last-child::before{transform:rotate(-18deg)}
.tp-boss-hp{position:absolute;left:10px;right:10px;top:-16px;height:8px;background:rgba(0,0,0,.6);border:2px solid #1c1c30;border-radius:4px;overflow:hidden}
.tp-boss-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff4d4d,#ffb0b0);transform-origin:left;transition:transform .2s}
.tp-boss.hurt{filter:brightness(2) drop-shadow(0 0 18px #fff)}
.tp-boss.spit .tp-boss-card{transform:scaleX(1.08)}
.tp-boss.dead{animation:tpbossdie .9s ease-in forwards}
@keyframes tpbossdie{40%{transform:translate(280px,360px) rotate(10deg) scale(1.1)}to{transform:translate(280px,640px) rotate(90deg) scale(.6);opacity:0}}

/* 特效 */
.tp-fx{position:absolute;inset:0;pointer-events:none;z-index:6}
.tp-pow{position:absolute;transform:translate(-50%,-50%);font-size:18px;font-weight:900;color:#fff;-webkit-text-stroke:1.2px #1c1c30;paint-order:stroke fill;text-shadow:2px 2px 0 #1c1c30;white-space:nowrap;animation:tppow .8s ease-out forwards}
.tp-pow.good{color:#ffd166;font-size:22px}
.tp-pow.bad{color:#ff6b6b}
.tp-pow.mid{color:#ccc}
@keyframes tppow{from{transform:translate(-50%,-50%) scale(.5)}40%{transform:translate(-50%,-70%) scale(1.1);opacity:1}to{transform:translate(-50%,-120%);opacity:0}}
.tp-boom{position:absolute;width:80px;height:80px;margin:-40px 0 0 -40px;animation:tpboom .6s ease-out forwards}
@keyframes tpboom{from{transform:scale(.4)}60%{transform:scale(1.2);opacity:1}to{transform:scale(1.3);opacity:0}}

/* HUD / 文案 */
.tp-hud{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center;z-index:8}
.tp-hp{display:flex;gap:4px}
.tp-hp i{width:24px;height:24px;display:block;transition:opacity .2s}
.tp-hp i.off{opacity:.2;filter:grayscale(1)}
.tp-score{font-size:16px;font-weight:900;color:#fff;text-shadow:0 1px 3px #000}
.tp-scene-name{position:absolute;left:0;right:0;top:50px;text-align:center;font-size:20px;font-weight:900;letter-spacing:6px;color:#e8e8e8;opacity:0;z-index:8;pointer-events:none;text-shadow:0 2px 6px #000}
.tp-scene-name.on{animation:tpname 2.2s ease-out forwards}
@keyframes tpname{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.tp-toast{position:absolute;left:50%;top:150px;transform:translateX(-50%);background:#fff;color:#1c1c30;font-weight:900;font-size:15px;padding:6px 14px;border-radius:999px;border:3px solid #1c1c30;box-shadow:3px 3px 0 #1c1c30;opacity:0;transition:opacity .1s;z-index:9;white-space:nowrap;pointer-events:none}
.tp-toast.on{opacity:1}
.tp-tutor{position:absolute;left:50%;top:92px;transform:translateX(-50%);background:rgba(0,0,0,.66);color:#ffd166;font-weight:900;font-size:15px;padding:8px 16px;border-radius:12px;text-align:center;line-height:1.4;z-index:9;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.tp-tutor small{color:#fff;font-size:12px}
.tp-tutor.off{opacity:0}

/* 控制键 */
.tp-ctl{position:absolute;left:0;right:0;top:522px;height:70px;display:flex;justify-content:space-between;padding:0 14px;z-index:9}
.tp-btn{width:150px;height:66px;border-radius:16px;border:3px solid #1c1c30;box-shadow:4px 4px 0 #1c1c30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#f4f1ea,#d9d4c6);color:#1c1c30;touch-action:none}
.tp-btn b{font-size:24px;font-weight:900;line-height:1}
.tp-btn small{font-size:11px;font-weight:700;opacity:.7}
.tp-btn.jump{background:linear-gradient(#ffe08a,#f4a53a)}
.tp-btn.on{transform:translate(3px,3px);box-shadow:1px 1px 0 #1c1c30;filter:brightness(.92)}

.tp-player.loaded .tp-tw{filter:drop-shadow(0 0 5px #d4f3ed)}.tp-score{font-size:12px!important;max-width:180px}