#arm-scene{width:min(1010px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;background:#f5ead0;color:#24463a;border:1px solid #c3a866;border-radius:20px}#arm-scene::backdrop{background:#132e2acc;backdrop-filter:blur(5px)}.arm-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-bottom:1px solid #cab888;font:13px system-ui}.arm-nav button{border:0;background:transparent;color:#315841;padding:9px;cursor:pointer}.arm-content{padding:20px 30px;text-align:center}.arm-content h1{font:600 clamp(23px,3vw,34px)/1.1 Georgia;margin:7px 0 15px}.arm-frame,.arm-stage{position:relative;aspect-ratio:3/2;width:min(100%,calc(max(200px,100svh - 355px) * 1.5));margin:auto;overflow:hidden;border-radius:14px;box-shadow:0 5px 18px #2a432533;background:#283c53}.arm-frame>img,.arm-stage>img{display:block;width:100%;height:100%;object-fit:cover}.arm-art{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 3px 3px #2b190a55)}.arm-name{position:absolute;bottom:7%;font:600 14px system-ui;background:#fff0ccdd;color:#3d4936;border-radius:14px;padding:5px 12px}.arm-name.john{left:17%}.arm-name.agy{right:17%}.arm-pin{position:absolute;left:30%;top:60%;font:900 clamp(22px,4vw,38px) system-ui;color:#fff3bd;text-shadow:2px 2px #503523;display:none}.pinned .arm-pin{display:block;animation:arm-pin .45s ease-out}.arm-score{display:flex;align-items:center;justify-content:center;gap:10px;font:12px system-ui;margin:14px auto 10px;max-width:500px}.arm-meter{flex:1;height:22px;accent-color:#4d8460}.arm-controls{display:flex;justify-content:center;align-items:center;gap:15px}.arm-seconds{font:600 14px system-ui;min-width:85px}.arm-next,.arm-refuse,.arm-start,.arm-tap,.arm-finish{border:1px solid #75996f;border-radius:24px;background:#1c5545;color:#ffefbc;padding:12px 24px;font:600 15px system-ui;cursor:pointer;touch-action:manipulation}.arm-tap{min-height:54px;user-select:none}.arm-tap:active{transform:scale(.96);background:#3d7957}.arm-feedback{min-height:22px;font:600 14px/1.4 system-ui}.arm-line{max-width:800px;font:21px/1.4 Georgia;margin:16px auto}.arm-guide{max-width:740px;margin:10px auto;font:14px/1.5 system-ui;color:#56704d}.arm-nav button:focus-visible,.arm-next:focus-visible,.arm-refuse:focus-visible,.arm-start:focus-visible,.arm-tap:focus-visible,.arm-finish:focus-visible{outline:3px solid #3e8663;outline-offset:3px}.arm-stop .arm-map-art{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #315f3955)}@keyframes arm-pin{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:650px){.arm-content{padding:16px}.arm-nav{padding:8px}.arm-nav>span{display:none}.arm-line{font-size:18px}.arm-guide{font-size:13px}.arm-name{font-size:11px;padding:3px 8px}.arm-score{font-size:10px}.arm-controls{gap:8px}.arm-tap{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.pinned .arm-pin{animation:none}.arm-tap:active{transform:none}}

/* Integrated painted poses replace the detached vector arms. Full-frame alignment prevents separate limbs and scales atomically at every viewport. */
.arm-painted,.arm-pose{position:absolute;inset:0;width:100%;height:100%}.arm-pose{display:block;object-fit:cover;visibility:hidden}.arm-pose.active{visibility:visible}.arm-art{display:none}

/* Match controls need more vertical room than the story/ending. Keep navigation visible if a short viewport still requires scrolling. */
#arm-scene[data-phase="match"] .arm-stage{width:min(100%,calc(max(160px,100svh - 420px) * 1.5))}#arm-scene[data-phase="match"] .arm-nav{position:sticky;top:0;z-index:8;background:#f5ead0}