.touch-guide{padding:9px;background:#151412;font-family:"Courier New","Microsoft YaHei",monospace}
.touch-help-window>.touch-help-bar{min-height:40px;justify-content:flex-end;padding:4px 8px}
.guide-panels{display:grid;place-items:center;gap:8px}.guide-scene{position:relative;width:min(660px,100%);overflow:hidden;border:1px solid #4b4640;background:#0a0908}.guide-tab-card{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:9px 14px;border:0;background:#11100e;color:#99928a;text-align:left;cursor:pointer}.guide-tab-card>span{display:flex;flex-direction:column;gap:6px}.guide-tab-card strong{color:#e45a62;font:700 14px/1 "Courier New","Microsoft YaHei",monospace;letter-spacing:.1em}.guide-tab-card small{color:#d8d0c7;font:13px/1.45 "Courier New","Microsoft YaHei",monospace}.guide-tab-card>i{color:#7c746c;font:400 19px/1 Georgia;transition:transform .2s ease,color .2s ease}.guide-tab-card:hover,.guide-tab-card:focus-visible{background:#171513}.guide-tab-card:hover>i,.guide-tab-card:focus-visible>i{color:#eee}.guide-tab-card[aria-expanded="true"]{background:#181412}.guide-tab-card[aria-expanded="true"]>i{color:#e45a62;transform:rotate(45deg)}.guide-demo-body{border-top:1px solid #403b36}.guide-panel.is-playing .guide-demo-body{animation:guideOpen .18s ease-out both}.guide-replay{display:none;margin:8px 8px 8px auto;padding:6px 12px;border:1px solid #ddd3c8;background:#111;color:#fff;font:700 10px/1 "Courier New","Microsoft YaHei",monospace;box-shadow:2px 2px 0 #000;cursor:pointer}.guide-panel.is-finished .guide-replay{display:block}
.orientation-guide{background:#050505}.orientation-guide-copy{padding:12px 14px;border-bottom:1px solid #403b36;background:#11100e}.orientation-guide-copy strong{display:block;margin-bottom:7px;color:#e45a62;font:700 14px/1.2 "Courier New","Microsoft YaHei",monospace;letter-spacing:.08em}.orientation-guide-copy p{margin:0;color:#e4ddd4;font:12px/1.65 "Courier New","Microsoft YaHei",monospace}.orientation-guide img{display:block;width:min(360px,72%);height:auto;margin:10px auto 12px;background:#000}
.focus-stage,.menu-stage{position:relative;height:211px;overflow:hidden;background-image:repeating-linear-gradient(0deg,transparent 0 23px,#ffffff08 24px),repeating-linear-gradient(90deg,transparent 0 23px,#ffffff08 24px)}
.focus-stage{background-color:#0a0a0c;background-image:radial-gradient(circle at 60% 62%,#24202a,#09090a 64%),repeating-linear-gradient(0deg,transparent 0 23px,#ffffff08 24px),repeating-linear-gradient(90deg,transparent 0 23px,#ffffff08 24px)}
.demo-finger{position:absolute;z-index:7;width:30px;height:30px;border:2px solid #eee7dc;border-radius:50%;background:#ddd5ca20;box-shadow:2px 2px 0 #000}
.demo-finger:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#f7f1e9}
.demo-player{position:absolute;z-index:5;left:44%;top:61%;width:18px;height:18px;border:2px solid #f1e9df;transform:rotate(45deg);background:#b9232e;box-shadow:0 0 0 3px #b9232e33}
.demo-player:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.finger-move{left:70%;top:66%}.finger-focus{left:13%;top:18%;border-color:#e85c64;opacity:0}
.move-trace{position:absolute;left:35%;top:38%;width:48%;height:44%;border:1px dashed #ffffff26;border-radius:50%;transform:rotate(-13deg)}
.demo-hitbox{position:absolute;z-index:4;left:calc(44% - 7px);top:calc(61% - 7px);width:34px;height:34px;border:2px solid #5caeff;border-radius:50%;opacity:0}
.focus-label{position:absolute;z-index:8;left:calc(13% - 29px);top:calc(18% + 39px);padding:4px 6px;border:1px solid #914149;background:#0d0c0b;color:#ef777d;font:8px/1 "Courier New",monospace;letter-spacing:.04em;white-space:nowrap;opacity:0}
.shot-stream{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}.demo-shot{position:absolute;width:6px;height:9px;border:1px solid #ffd5d7;background:#e63a45;box-shadow:0 0 5px #ef343e;will-change:transform,opacity}
.menu-stage{background-color:#0c0b0a}.menu-question{position:absolute;top:18px;left:0;right:0;text-align:center;color:#a7a097;font:9px/1 monospace;letter-spacing:.16em}.menu-choices{position:absolute;top:55px;left:50%;width:176px;transform:translateX(-50%);display:flex;justify-content:space-between}.menu-choices span{width:76px;padding:8px 0;border:1px solid #4f4a45;text-align:center;color:#706b65;font:700 11px/1 monospace}.choice-yes{color:#fff;border-color:#e45a62;background:#551218}.menu-result{position:absolute;top:55px;left:50%;display:flex;align-items:center;width:176px;height:35px;transform:translateX(-50%);border:1px solid #a89f96;background:#151310;opacity:0}.menu-result small{padding:0 9px;color:#706b65;font-size:7px}.menu-result b{flex:1;border-left:1px solid #4f4a45;color:#eee;text-align:center;font-size:11px}
.menu-finger-one{left:calc(50% - 54px);top:53px;opacity:0;transform:scale(.68)}.menu-finger-two{left:calc(50% + 23px);top:53px;border-color:#e85c64;opacity:0;transform:scale(.68)}
.menu-phase{position:absolute;left:0;right:0;bottom:13px;text-align:center;color:#d9d1c7;font:8px/1 monospace;opacity:0}.phase-back{color:#ef777d}
.dialogue-stage{position:relative;height:110px;padding:18px 68px 18px 84px;background:linear-gradient(90deg,#14110f,#090909)}.dialogue-portrait{position:absolute;left:18px;bottom:12px;display:grid;place-items:center;width:50px;height:64px;border:1px solid #655d55;background:#201b19;color:#8e837a;font:26px/1 Georgia}.dialogue-box{height:62px;overflow:hidden;border:1px solid #655d55;background:#080808;padding:8px 10px}.dialogue-ticker{display:flex;flex-direction:column;gap:8px;color:#d8d0c6;font:9px/1.1 "Microsoft YaHei",sans-serif}.dialogue-ticker span{height:10px;white-space:nowrap}.dialogue-finger{right:24px;top:29px;transform:scale(.7)}.hold-ring{position:absolute;right:19px;top:24px;width:42px;height:42px;border:2px solid #e45a62;border-radius:50%;opacity:0}
@keyframes guideOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.focus-demo.is-playing .demo-player{animation:playerOrbit 7s linear 1 both}.focus-demo.is-playing .finger-move{animation:fingerOrbit 7s linear 1 both}.focus-demo.is-playing .finger-focus{animation:focusDown 7s ease-in-out 1 both}.focus-demo.is-playing .demo-hitbox{animation:hitboxOrbit 7s linear 1 both}.focus-demo.is-playing .focus-label{animation:focusText 7s steps(1) 1 both}
.menu-demo.is-playing .menu-choices{animation:choicesVisible 12s steps(1) 1 both}.menu-demo.is-playing .choice-yes{animation:yesChoice 12s steps(1) 1 both}.menu-demo.is-playing .choice-no{animation:noChoice 12s steps(1) 1 both}.menu-demo.is-playing .result-yes{animation:resultYes 12s steps(1) 1 both}.menu-demo.is-playing .result-no{animation:resultNo 12s steps(1) 1 both}.menu-demo.is-playing .menu-finger-one{animation:menuFingerOne 12s ease-in-out 1 both}.menu-demo.is-playing .menu-finger-two{animation:menuFingerTwo 12s ease-in-out 1 both}.menu-demo.is-playing .phase-confirm{animation:phaseConfirm 12s steps(1) 1 both}.menu-demo.is-playing .phase-select{animation:phaseSelect 12s steps(1) 1 both}.menu-demo.is-playing .phase-back{animation:phaseBack 12s steps(1) 1 both}
.dialogue-demo.is-playing .dialogue-ticker{animation:dialogueSkip 4s steps(1,end) 1 both}.dialogue-demo.is-playing .dialogue-finger{animation:holdFinger 4s ease-in-out 1 both}.dialogue-demo.is-playing .hold-ring{animation:holdRing 4s linear 1 both}
@keyframes fingerOrbit{0%,7%{transform:translate(0,0)}13%{transform:translate(46px,-24px)}19%{transform:translate(12px,-61px)}25%{transform:translate(-48px,-31px)}31%,52%{transform:translate(0,0)}63%{transform:translate(46px,-24px)}74%{transform:translate(12px,-61px)}85%{transform:translate(-48px,-31px)}96%,100%{transform:translate(0,0)}}
@keyframes playerOrbit{0%,7%{transform:translate(0,0) rotate(45deg)}13%{transform:translate(46px,-24px) rotate(45deg)}19%{transform:translate(12px,-61px) rotate(45deg)}25%{transform:translate(-48px,-31px) rotate(45deg)}31%,52%{transform:translate(0,0) rotate(45deg)}63%{transform:translate(46px,-24px) rotate(45deg)}74%{transform:translate(12px,-61px) rotate(45deg)}85%{transform:translate(-48px,-31px) rotate(45deg)}96%,100%{transform:translate(0,0) rotate(45deg)}}
@keyframes focusDown{0%,47%,100%{opacity:0;transform:scale(.7)}52%,94%{opacity:1;transform:scale(1)}}@keyframes focusText{0%,51%,96%,100%{opacity:0}52%,95%{opacity:1}}
@keyframes hitboxOrbit{0%,49%,100%{opacity:0;transform:translate(0,0)}52%{opacity:1;transform:translate(0,0)}63%{opacity:1;transform:translate(46px,-24px)}74%{opacity:1;transform:translate(12px,-61px)}85%{opacity:1;transform:translate(-48px,-31px)}96%{opacity:1;transform:translate(0,0)}97%{opacity:0}}
@keyframes choicesVisible{0%,13%,25%,51%,62%,79%{opacity:1}14%,24%,52%,61%,80%,100%{opacity:0}}@keyframes yesChoice{0%,31%,63%,100%{color:#fff;border-color:#e45a62;background:#551218}32%,62%{color:#706b65;border-color:#4f4a45;background:transparent}}@keyframes noChoice{0%,31%,63%,100%{color:#706b65;border-color:#4f4a45;background:transparent}32%,62%{color:#fff;border-color:#e45a62;background:#551218}}
@keyframes resultYes{0%,13%,25%,100%{opacity:0}14%,24%{opacity:1}}@keyframes resultNo{0%,51%,62%,100%{opacity:0}52%,61%{opacity:1}}
@keyframes menuFingerOne{0%,7%{opacity:0;transform:scale(.68)}9%,12%{opacity:1;transform:scale(.58)}14%,27%{opacity:0}30%{opacity:1;transform:translate(0,0) scale(.68)}39%{opacity:1;transform:translate(85px,0) scale(.68)}45%,49%{opacity:1;transform:translate(85px,0) scale(.58)}52%,67%{opacity:0}70%,76%{opacity:1;transform:translate(0,0) scale(.58)}80%,100%{opacity:0}}
@keyframes menuFingerTwo{0%,69%,80%,100%{opacity:0}71%,77%{opacity:1;transform:scale(.58)}}
@keyframes phaseConfirm{0%,24%{opacity:1}25%,100%{opacity:0}}@keyframes phaseSelect{0%,25%,62%,100%{opacity:0}26%,61%{opacity:1}}@keyframes phaseBack{0%,62%{opacity:0}63%,100%{opacity:1}}
@keyframes dialogueSkip{0%,27%{transform:translateY(0)}29%{transform:translateY(-18px)}31%{transform:translateY(-36px)}33%{transform:translateY(-54px)}35%{transform:translateY(-72px)}37%{transform:translateY(0)}39%{transform:translateY(-36px)}41%{transform:translateY(-72px)}43%{transform:translateY(-18px)}45%{transform:translateY(-54px)}47%{transform:translateY(0)}49%{transform:translateY(-72px)}51%{transform:translateY(-36px)}53%{transform:translateY(-18px)}55%{transform:translateY(-54px)}57%{transform:translateY(0)}59%{transform:translateY(-36px)}61%{transform:translateY(-72px)}63%{transform:translateY(-18px)}65%,100%{transform:translateY(0)}}@keyframes holdFinger{0%,7%,72%,100%{transform:scale(.7)}10%,69%{transform:scale(.6)}}@keyframes holdRing{0%{transform:scale(.4);opacity:0}8%{opacity:1}26%,68%{transform:scale(1.05);opacity:1}72%,100%{transform:scale(1.05);opacity:0}}
@media(max-width:760px){.touch-guide{padding:5px}.guide-panels{gap:5px}.guide-tab-card{min-height:58px;padding:9px 11px}.guide-tab-card strong{font-size:13px}.guide-tab-card small{font-size:12px}.focus-stage,.menu-stage{height:190px}.focus-demo{min-width:0}.menu-question{top:13px}.menu-choices,.menu-result{top:47px;width:150px}.menu-choices span{width:65px}.menu-finger-one,.menu-finger-two{top:45px}.dialogue-stage{height:94px;padding:12px 54px 12px 66px}.dialogue-portrait{left:9px;bottom:9px;width:43px;height:55px}.dialogue-box{height:54px}.dialogue-finger{right:13px;top:20px}.hold-ring{right:8px;top:15px}}
@media(max-width:560px) and (orientation:portrait){.focus-stage,.menu-stage{height:185px}.dialogue-stage{height:94px}.touch-help-window>header button{position:absolute;right:8px;top:8px}}
@media(max-height:420px) and (min-width:561px){.touch-help{padding:4px}.touch-help-window>header{min-height:40px;padding:4px 8px}.touch-guide{padding:4px}.guide-tab-card{min-height:45px;padding:6px 10px}.focus-stage,.menu-stage{height:178px}.dialogue-stage{height:58px;padding-top:5px;padding-bottom:5px}.dialogue-portrait{height:43px}.dialogue-box{height:38px}}
@media(prefers-reduced-motion:reduce){.touch-guide *{animation-play-state:paused!important}}