.hood-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;touch-action:pan-y;cursor:grab;pointer-events:none;outline:none}
.hood-canvas:focus-visible{outline:1px dashed #81996b;outline-offset:-12px;border-radius:30%}
.hood-canvas:active{cursor:grabbing}
.character-stage[data-ready=true] .hood-canvas{opacity:1;pointer-events:auto;transition:opacity .6s}
.character-stage[data-ready=true] .character-motion{opacity:0;pointer-events:none;visibility:hidden}
.character-stage[data-ready=true] .crt-screen{pointer-events:none}
.character-name{pointer-events:auto;align-items:center;bottom:100px;z-index:3;gap:9px;background:#e8e9e2be;border:1px solid #bdc9b366;border-radius:3px;font-size:7px;backdrop-filter:blur(12px)}
.character-name button{padding:2px 5px;font-size:14px;line-height:1;color:#4c6142;min-width:19px;height:20px}
.character-name button:hover{background:#ccff0070}
.character-stage{aspect-ratio:2/3;width:min(53vw,630px,calc((100svh - 185px)*.6667));bottom:-5px}
.character-stage .character-motion{pointer-events:none}
.character-stage .crt-screen{pointer-events:auto}
@media(min-width:901px) and (max-height:850px){.character-stage{width:min(52vw,550px,calc((100svh - 145px)*.6667));bottom:-30px}.character-name{bottom:112px}}
@media(min-width:681px) and (max-width:900px){.character-stage{width:540px;max-width:73vw;bottom:0}.character-name{bottom:100px}}
@media(max-width:680px){.character-stage{width:min(120vw,490px);max-width:none;top:154px;bottom:auto}.character-name{position:fixed;top:505px;bottom:auto;left:50%;font-size:6px;gap:6px;max-width:95%;padding:3px 8px;white-space:nowrap}.character-name button{font-size:12px;height:19px}.character-stage[data-ready=true] .character-name{top:505px}.hood-canvas{touch-action:pan-y}}
@media(prefers-reduced-motion:reduce){.character-stage[data-ready=true] .hood-canvas{transition:none}}
@media(max-width:680px){.character-stage .character-name,.character-stage[data-ready=true] .character-name{position:absolute;top:calc(max(675px,calc(100svh - 118px)) - 261px);bottom:auto}}
@media(max-width:380px){.character-stage .character-name,.character-stage[data-ready=true] .character-name{top:calc(max(650px,calc(100svh - 118px)) - 261px)}}
.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-dialogue{display:none;position:absolute;top:33%;left:9%;right:9%;font:clamp(9px,1.12vw,15px)/1.45 var(--mono);white-space:pre-line;text-align:left;letter-spacing:-.04em;text-shadow:0 0 9px #ccff0044}
.is-talking .screen-dialogue{display:block}.is-talking .face{left:72%;right:10%;top:12%;height:15%}.is-talking .screen-call{bottom:14%;font-size:clamp(5px,.6vw,8px)}
.screen-dialogue[data-typing=true]:after{content:'▌';font-size:.9em;animation:flicker .7s steps(1) infinite}
@media(max-width:680px){.screen-dialogue{font-size:12px}.is-talking .screen-call{font-size:6px}}